<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
        <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage Items</title>

<!-- CSS for addItem_Form.jsp -->
	
<!-- Jquery UI-->
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/script/jquery/development-bundle/themes/base/jquery.ui.all.css"/>"/>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/jquery-1.8.2.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/external/jquery.bgiframe-2.1.2.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.core.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.widget.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.mouse.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.button.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.draggable.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.position.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.resizable.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.dialog.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/script/jquery/development-bundle/ui/jquery.ui.effect.js"/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/script/jquery/development-bundle/demos.css"/>"/>
<!-- MoDAL FORM EKSECUSION-->
<script>
	$(function() {
		var name = $( "#name" ),
			email = $( "#email" ),
			password = $( "#password" ),
			allFields = $( [] ).add( name ).add( email ).add( password ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}

		$( "#addItem_form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"Create an account": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( name, "username", 3, 16 );
					bValid = bValid && checkLength( email, "email", 6, 80 );
					bValid = bValid && checkLength( password, "password", 5, 16 );

					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
					bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

					if ( bValid ) {
						$( "#users tbody" ).append( "<tr>" +
							"<td>" + name.val() + "</td>" + 
							"<td>" + email.val() + "</td>" + 
							"<td>" + password.val() + "</td>" +
						"</tr>" ); 
						$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});

		$(".bt_green").click(function() {
				$("#addItem_form").dialog( "open" );
			});
		$(".editItem").click(function() {
			$("#addItem_form").dialog( "open" );
		});
	});
	</script>
<!-- End od Modal Form  -->
<!-- End of JQuery UI -->	


<!-- JQuery for JConfirmation -->	
<script type="text/javascript" src="<c:url value="/resources/script/jquery/jconfirmaction.jquery.js"/>"></script>
<script type="text/javascript">	
	$(document).ready(function() {
		$('.ask').jConfirmAction();
	});	
</script>
</head>
<!-- End of JConfirmation -->
<body>
	<div id="content">


		<table>
			<tr>
				<th align="left"><h2>Add Brand</h2></th>
				<th><a href="<c:url value="/master/brand/searchBrand"/>"
					class="bt_green"><span class="bt_green_lft"></span><strong>Back
							to Brand List</strong><span class="bt_green_r"></span> </a></th>
			</tr>
			<tr>
				<td colspan="2">
					<form action="<c:url value="insertBrand"/>" method="post">
						<table id="rounded-corner"
							summary="2007 Major IT Companies' Profit">
							<tr>
								<td align="right"><label>Brand Name:</label>
								</td>
								<td><input type="text" class="input" name="brandName"
									size="40" />
								</td>
							</tr>
							<tr>
								<td></td>
								<td align="left"><input type="submit" value="Save"
									class="button" />
								</td>
							</tr>
						</table>
					</form></td>
			</tr>
		</table>

	</div>
</body>
</html>